<script setup>
</script>

<template>
  <div class="global">
    <div class="form">
      <div class="title" style="margin-bottom:30px">猫咪live</div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef">
        <el-form-item  prop="username">
          <el-input placeholder="请输入用户名" v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item  prop="password">
          <el-input placeholder="请输入密码" v-model="ruleForm.password" type="password" />
        </el-form-item>


      </el-form>
      <el-button type="primary" style="width:100%" size="large" @click="submitForm(ruleFormRef)">登录</el-button>
    </div>
  </div>
</template>
<script setup>

import { reactive, ref } from "vue";
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
import service from "@/utils/request";
const ruleForm = reactive({
  username: "",
  password: "",
});
const rules = reactive({
  username: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
});
const submitForm = async (formEl) => {
  console.log(ruleForm.username,"ri")
  if(ruleForm.username == ''){
      ElMessage({
    message: '请输入用户名',
    type: 'warning',
  })
  return
  }
  if(ruleForm.password == ''){
      ElMessage({
    message: '请输入密码',
    type: 'warning',
  })
    return
  }
  service.post("/login",ruleForm).then(res=>{
    console.log(res,"res")
    if(res.code == 200){
      ElMessage({
        type:"success",
        message:"登录成功"
      })
      window.localStorage.setItem("userinfo",JSON.stringify(res.data))
      router.push("/about")
    }else{
      ElMessage({
        type:"warning",
        message:"该用户不存在"
      })
    }

  })
}
</script>
<style scoped>
.title {
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}
.global {
  width: 100%;
  height: 100%;
  background: url("@/assets/bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.form {
  width: 430px;

  padding: 25px;
  box-sizing: border-box;
  background: #fff;
  position: absolute;
  top: 20%;
  right: 20%;
}
</style>